<template>
  <!-- 核销界面 -->
  <div class="padding_10">
    <!-- 核销码 -->
    <div>
      <el-input
        ref="mark"
        v-model="codeVal"
        autofocus
        placeholder="请输入或扫描核销码"
        show-password
        style="width: 20%; margin-right: 5px"
        type="text"
      />
      <el-button
        v-permissions="{ permission: ['check:Verification'] }"
        type="primary"
        @click="writeOff"
      >
        核销
      </el-button>
    </div>
    <!-- 核销记录说明 -->
    <div class="flex_y_center" style="margin-top: 10px">
      <i class="el-icon-s-opportunity"></i>
      <div style="width: 5px"></div>
      <div style="rgb(165, 58, 53); font-size: 13px; font-weight: 600;">
        下列列表展示结算单核销记录
      </div>
    </div>
    <!-- 已核销列表展示 -->
    <div style="margin-top: 5px">
      <el-table :data="writeOffInfo" :empty-text="emptyText">
        <el-table-column label="用户名" prop="res_customer_name" />
        <el-table-column label="订单号" prop="order_sn" />
        <el-table-column label="商品名" prop="goods_name" />
      </el-table>
    </div>
    <!-- 分页 -->
    <div style="display: flex; justify-content: space-between">
      <div></div>
      <el-pagination
        :current-page.sync="page"
        layout="prev, pager, next, jumper"
        :total="total"
        @current-change="getWriteOffInfo"
      />
    </div>
  </div>
</template>

<script>
  import { getCusCardList } from '@/api/writeOff'
  import { customerCardCheck } from '@/api/order'

  export default {
    data() {
      return {
        codeVal: '', // 存放扫码枪扫描的二维码字符串

        emptyText: ' ',
        writeOffInfo: [], // 存放获取到的已核销列表

        page: 1,
        total: 10, // 分页页数
      }
    },
    mounted() {
      this.getWriteOffInfo()
    },
    methods: {
      // 获取已核销信息
      getWriteOffInfo() {
        const laoding = this.$loading({
          lock: true,
          target:
            this.writeOffInfo.length == 0
              ? '.el-table__empty-block'
              : '.el-table__body',
        })
        getCusCardList().then((res) => {
          this.writeOffInfo = res.data.data
          laoding.close()
          if (res.data.data.length == 0) {
            this.emptyText = '暂无数据'
          }
        })
      },
      // 核销事件
      writeOff() {
        const data = {
          card_sn: this.codeVal,
        }
        customerCardCheck(data).then((res) => {
          if (res.code != 200) this.$message.error(res.message)
          else {
            this.$message.success('核销成功')
            this.getWriteOffInfo() // 重新获取核销记录列表
          }
        })
      },
    },
  }
</script>

<style scoped></style>
